<template>
	<view class="center">
		<view class="logo">
			<!-- <image src="/static/image/logo/wx_logo.png" mode=""></image>
			<view class="logo-title">荔知游</view> -->
			<image src="/static/image/common/boot.png" mode=""></image>
		</view>
		<button v-if="!isShow" class="button" @tap="onCheck">手机号一键登录</button>
		<button v-else class="button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">手机号一键登录</button>

		<view class="flex align-center mar_top50">
			<u-checkbox-group shape="circle" @change="changeCheckbox" iconPlacement="left" inactiveColor="#fff">
				<u-checkbox inactiveColor="#fff" activeColor="#E5725F"></u-checkbox>
			</u-checkbox-group>
			<view class="fontS28 color_AAAAAA">我已阅读并同意<text @tap="jumpUserAgreement('protocol')"
					class="agreement">荔知游用户协议</text>、<text @tap="jumpUserAgreement('privacy')"
					class="agreement">隐私协议</text></view>
		</view>
	</view>
</template>
<script setup>
	import {
		ref,
		getCurrentInstance
	} from 'vue';

	import {
		onLoad
	} from '@dcloudio/uni-app';

	const {
		proxy
	} = getCurrentInstance();

	const isShow = ref(false);

	const changeCheckbox = (el) => {
		isShow.value = el.length > 0 ? true : false;
	}

	const onCheck = () => {
		uni.showToast({
			title: '请阅读并勾选用户协议',
			icon: 'none',
			duration: 2000
		})
	}

	// 获取用户信息
	const userNode = () => {
		proxy.$api.getUserInfor().then(res => {
			uni.setStorageSync('user_info', JSON.stringify(res.data))
		})
	}

	const getPhoneNumber = async (e) => {
		console.log('getPhone---')
		if (e.detail.errMsg === "getPhoneNumber:ok") {
			const codes = await uni.login({
				provider: "weixin"
			})
			const user = await uni.getUserInfo({
				provider: "weixin"
			})
			console.log(user, 'user')
			proxy.$api.loginNode(codes.code, e.detail.code, user.userInfo.avatarUrl, user.userInfo.nickName).then(
				res => {
					if (res.code === "10000") {
						uni.setStorageSync("token", res.data);
						userNode();
						uni.showToast({
							title: "登录成功",
							duration: 1000
						})
						setTimeout(() => {
							uni.navigateBack({
								success: () => {
									delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页。默认为1
								},
								//失败回调直接返回首页
								fail: () => {
									uni.redirectTo({
										url: '/pages/dialogue/dialogue'
									})
								}
							});
						}, 1100)
					} else {
						uni.showToast({
							title: "登录失败",
							duration: 1000,
							icon: "error"
						})
					}
				})
		}
	}

	const jumpUserAgreement = (el) => {
		uni.navigateTo({
			url: `/my-actions/user-agreement/user-agreement?title=${el}`
		})
	}
	
	onLoad(() => {
		uni.setNavigationBarColor({
		    frontColor: '#ffffff',
		    backgroundColor: '#e98b63',
		    animation: {
		        duration: 400,
		        timingFunc: 'easeIn'
		    }
		})
	})
</script>
<style lang="scss" scoped>
	:deep(.u-checkbox__icon-wrap--circle) {
		border: 1rpx solid #ccc !important;
	}

	.center {
		padding: 0 50rpx;
		height: 100vh;
		overflow: hidden;
		overflow-y: auto;
		background: linear-gradient(180deg, #E98B63 0%, #E04055 100%);

		.logo {
			margin-top: 100rpx;
			text-align: center;

			image {

				width: 182rpx;
				height: 285rpx;
				border-radius: 8rpx;
			}

			.logo-title {
				font-size: 28rpx;
				color: #222222;
			}
		}
	}

	.button {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 140rpx;
		height: 80rpx;
		color: #E5725F;
		font-weight: bold;
		font-size: 28rpx;
		border-radius: 8rpx;
		background: #FFFFFF;
	}

	.agreement {
		color: #FFFFFF;
	}
</style>